import React, { Component, useRef } from 'react'
import { Button, Form, Input, Select, Space, Tabs, DatePicker } from 'antd'
import TheButton from '@/components/TheButton'
import TheTable from '@/components/TheTable'
import ThePagination from '@/components/ThePagination'
import TheDialog from '@/components/TheDialog'
import TheImage from '@/components/TheImage'
import _ from 'lodash';
import { ExclamationCircleFilled } from "@ant-design/icons";
import { apiGetBrandApprovalPage, apiGetGoodsClassifyList, apiGetBrandApprovalReview } from '@/request/mallManagement'
import { getDateTime3 } from '@/utils/getDate'

const { TabPane } = Tabs
const { RangePicker } = DatePicker
const { TextArea } = Input

const SearchHeader = ({ getValue, classifyList }) => {
  const formRef = useRef()
  const onFinish = (values) => {
    if (values.time && values.time.length) {
      values.approvalStartTime = getDateTime3(values.time[0])
      values.approvalEndTime = getDateTime3(values.time[1])
    }
    delete (values.time)
    _.forIn(values, (v, k) => {
      if (!v) {
        delete (values[k])
      }
    })
    getValue(values)
  }
  const reset = () => {
    formRef.current.setFieldsValue({
      goodsClassifyId: null,
      brandName: '',
      time: []
    })
    getValue({})
  }
  return (
    <Form ref={formRef} onFinish={onFinish} layout="inline">
      <Form.Item name="brandName" label="品牌名称">
        {/* <Select options={classifyList} placeholder={"请选择所属类目"} style={{ width: 160 }} /> */}
        <Input placeholder='请输入品牌名称'></Input>
        {/* <Input onPressEnter={this.onPressEnter} prefix={<SearchOutlined />}
          placeholder={'请输入关键词进行搜索'} /> */}
      </Form.Item>
      <Form.Item name="time" label="申请时间">
        <RangePicker />
      </Form.Item>
      <Form.Item>
        <Space>
          <Button htmlType="submit" type="primary">搜索</Button>
          <Button onClick={reset}>重置</Button>
        </Space>
      </Form.Item>
    </Form>
  );
};

export default class Examine extends Component {
  state = {
    approvalStatus: 'S',
    tabData: [
      {
        key: 'S',
        title: '待审核'
      },
      {
        key: 'B',
        title: '未通过'
      },
    ],
    columnsS: [
      {
        title: '品牌名称',
        dataIndex: 'brandName',
        key: 'brandName'
      },
      {
        title: '品牌图片',
        dataIndex: 'brandImg',
        key: 'brandImg',
        render: (text, record) => {
          return <TheImage src={text} width={80} height={80} />
        }
      },
      {
        title: '品牌介绍',
        dataIndex: 'brandDetail',
        key: 'brandDetail',
        render: (text, record) => {
          return ['undefined', 'null'].includes(text) ? '' : text
        }
      },
      {
        title: '申请商家',
        dataIndex: 'storeName',
        key: 'storeName'
      },
      {
        title: '申请时间',
        dataIndex: 'createTime',
        key: 'createTime'
      },
      {
        title: '操作',
        render: (text, record) => {
          return <>
            <TheButton haspermi={['mall:brandExamine:pass']} onClick={() => this.passBrand(record)}>通过</TheButton>
            <TheButton haspermi={['mall:brandExamine:reject']} onClick={() => this.rejectBrand(record)}>驳回</TheButton>
          </>
        }
      },
    ],
    columnsB: [
      {
        title: '品牌名称',
        dataIndex: 'brandName',
        key: 'brandName'
      },
      {
        title: '品牌图片',
        dataIndex: 'brandImg',
        key: 'brandImg',
        render: (text, record) => {
          return <TheImage src={text} width={80} height={80} />
        }
      },
      {
        title: '品牌介绍',
        dataIndex: 'brandDetail',
        key: 'brandDetail',
        render: (text, record) => {
          return text == 'undefined' ? '' : text
        }
      },
      {
        title: '申请商家',
        dataIndex: 'storeName',
        key: 'storeName'
      },
      {
        title: '申请时间',
        dataIndex: 'createTime',
        key: 'createTime'
      },
      {
        title: '驳回原因',
        dataIndex: 'refuseReason',
        key: 'refuseReason'
      },
    ],
    dataSourceS: [],
    dataSourceB: [],
    pageDataS: {
      pageNo: 1,
      pageSize: 10
    },
    pageDataB: {
      pageNo: 1,
      pageSize: 10
    },
    totalS: 0,
    totalB: 0,
    searchValue: {},
    visible: '',
    reason: '',
    classifyList: []
  }
  componentDidMount() {
    this.getData()
    this.getClassifyList()
  }
  getClassifyList = async () => {
    let res = await apiGetGoodsClassifyList({ level: 2 })
    if (res.code === 0 && res.data) {
      this.setState({
        classifyList: res.data.map(v => {
          return {
            value: v.goodsClassifyId,
            label: v.goodsClassifyName
          }
        })
      })
    }
  }
  getData = async () => {
    const { searchValue, approvalStatus } = this.state
    let res = await apiGetBrandApprovalPage({ approvalStatus, ...searchValue, ...this.state[`pageData${approvalStatus}`] })
    if (res.data && res.code === 0) {
      this.setState({
        [`dataSource${approvalStatus}`]: res.data,
        [`pageData${approvalStatus}`]: {
          pageNo: res.pageNo,
          pageSize: res.pageSize
        },
        [`total${approvalStatus}`]: res.totalCount
      })
    }
  }
  pageChange = (pageNo, pageSize) => {
    const { approvalStatus } = this.state
    this.setState({
      [`pageData${approvalStatus}`]: {
        pageNo,
        pageSize
      }
    }, () => {
      this.getData()
    })
  }
  getValue = value => {
    const { approvalStatus } = this.state
    this.setState({
      [`pageData${approvalStatus}`]: {
        pageNo: 1,
        pageSize: 10
      },
      searchValue: value
    }, () => {
      this.getData()
    })
  }
  changeKey = key => {
    this.setState({
      approvalStatus: key
    }, () => {
      this.getData()
    })
  }
  passBrand = value => {
    React.$confirm({
      title: '您确认通过审核此品牌吗？',
      onOk: async () => {
        let res = await apiGetBrandApprovalReview({ brandApprovalId: value.brandApprovalId, approvalStatus: 'T' })
        if (res.code === 0) {
          React.$message({
            type: "info",
            content: '审核通过'
          })
          this.getData()
        }
      }
    })
  }
  handleCancel = () => {
    this.setState({
      visible: false,
      rejecyId: '',
      reason: ''
    })
  }
  handleOk = async () => {
    const { reason, rejectId } = this.state
    if (!reason) {
      return React.$message({
        type: 'info',
        content: '请输入驳回原因'
      })
    }
    let res = await apiGetBrandApprovalReview({ brandApprovalId: rejectId, refuseReason: reason, approvalStatus: 'B' })
    if (res.code === 0) {
      React.$message({
        type: "info",
        content: '驳回成功'
      })
      this.handleCancel()
      this.getData()
    }
  }
  rejectBrand = value => {
    this.setState({
      visible: true,
      rejectId: value.brandApprovalId
    })
  }
  setReason = e => {
    this.setState({
      reason: e.target.value
    })
  }
  render() {
    const { approvalStatus, tabData, visible, classifyList } = this.state
    return (
      <div className='p-layout-box'>
        <Tabs onChange={this.changeKey} tabBarExtraContent={<SearchHeader classifyList={classifyList} getValue={this.getValue} />}>
          {
            tabData.map(v => {
              return <TabPane key={v.key} tab={v.title}>
                <div className="p-layout-content-pagination">
                  <TheTable
                    columns={this.state[`columns${approvalStatus}`]}
                    dataSource={this.state[`dataSource${approvalStatus}`]} />
                  <ThePagination
                    pageNo={this.state[`pageData${approvalStatus}`].pageNo}
                    pageSize={this.state[`pageData${approvalStatus}`].pageSize}
                    total={this.state[`total${approvalStatus}`]}
                    pageChange={this.pageChange}
                  />
                </div>
              </TabPane>
            })
          }
        </Tabs>
        <TheDialog
          title={
            <div>
              <ExclamationCircleFilled
                style={{ color: "#FAAD14", marginRight: 10 }}
              />
              驳回原因
            </div>
          }
          visible={visible}
          handleCancel={this.handleCancel}
          handleOk={this.handleOk}
          width={400}
        >
          <TextArea onChange={this.setReason} allowClear showCount maxLength={50} autoSize={{ minRows: 6, maxRows: 6 }} />
        </TheDialog>
      </div>
    )
  }
}
